<!--  -->
<template>
  <div>
    <nav-bar>
      <div slot="left"><icon icon="#icon-fanhui" /></div>
      <div slot="center">排行榜</div>
    </nav-bar>
    <b-scroll class="content">
      <div>
          <official-list :playList="playList"></official-list>
      </div>
    </b-scroll>

  </div>
</template>

<script>
import OfficialList from "./topListDetail/OfficialList.vue"
import BScroll from "@/components/common/scroll/BScroll.vue"
import NavBar from "@/components/common/navBar/NavBar.vue";
import Icon from "@/components/content/icon/Icon.vue";

import { getTopList,getPlayList } from "@/network/playList.js";
export default {
  name: "topList",
  components: {
    NavBar,
    Icon,
    BScroll,
    OfficialList
  },
  data() {
    return {
      playList: {
        'suige': {name: '',id: 0,img: '', songList: []},
        'newSong': {name: '',id: 0,img: '', songList: []},
        'hotSong': {name: '',id: 0,img: '', songList: []},
        'original': {name: '',id: 0,img: '', songList: []},
      }
    }
  },
  created() {
    this.getTopList(),
    this.getPlayList(19723756,"suige") //飙升榜
    this.getPlayList(3779629,"newSong") //新歌榜
    this.getPlayList(3778678,"hotSong") //热歌榜
    this.getPlayList(2884035,"original") //原创榜
  },
  methods: {
    getTopList() {
      getTopList().then((res) => {
        console.log(res);
      });
    },
    getPlayList(id,type) {
      getPlayList(id).then((res) => {
        this.playList[type].name = res.playlist.name
        this.playList[type].id = res.playlist.id
        this.playList[type].img = res.playlist.coverImgUrl
        for(let i = 0; i < 3; i++) {
          this.playList[type].songList.push({name: res.playlist.tracks[i].name,
          imgUrl: res.playlist.tracks[i].al.picUrl,
          artistName:[]})
          for(let j of res.playlist.tracks[i].ar) {
            this.playList[type].songList[i].artistName.push(j.name)
          }
        }
        console.log(res);
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.content {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>